<template>
  <div style="height:670px;background: #f6f7f9;">
    <div class="panel-top">
      <div class="userinfo">
        <van-image
            width="60px"
            height="60px"
            round
            fit="cover"
            :src="avatar"
            @click="pushUserDetails"
        />
        <div class="nameinfo">
          <p v-if="isLogin" style="font-size: 20px; margin-top: -1px;">
            {{ nickname }}
            <a style="font-size:0.8em;" href="javascript:;" @click="logout">[注销]</a><br>
            <span style="font-size: 12px; margin-left: 15px;">姓名：{{name}}</span>
            <span style="font-size: 12px; margin-left: 15px;">角色：{{role}}</span>
          </p>
          <p v-else @click="$router.push('/user/login')">点击登录</p>
        </div>
      </div>
    </div>
    <div class="panel-container">
      <!-- 我的功能开始 -->
      <div class="panel">
        <p>我的功能</p>
        <div class="divider"/>
        <van-grid clickable square :column-num="3" :border="false" >
          <van-grid-item icon="orders-o"  text="发出的快递" @click="orderList"/>
          <van-grid-item icon="logistics" text="待收货" @click="wait" />
          <van-grid-item icon="question-o" text="反馈建议" @click="feedback"/>
        </van-grid>
      </div>

      <van-cell-group class="panel">
        <van-cell title="地址管理" is-link url="/user/address"/>
        <van-cell title="评价管理" is-link url="/evaluate/list"/>
        <van-cell is-link @click="showPopup">联系我们</van-cell>
        <van-popup v-model="show" style="text-align: center; padding: 50px; font-weight: bold">联系我们，请拨打：15770641554</van-popup>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: true,
      nickname: '',
      name:'',
      show:false,
      role:'',
      avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    }
  },
  mounted() {
    // 加载当前用户的订单列表
    this.getUserInfo()
  },
  methods: {
    showPopup(){
      this.show=true;
    },
    getUserInfo() {
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/users/login-details';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let userDetails = response.data.data;
        if (userDetails != null) {
          this.isLogin = true;
          this.nickname = userDetails.nickname;
          if (!userDetails.avatar) {
            this.avatar = 'https://img01.yzcdn.cn/vant/cat.jpeg';
          }
          this.avatar = userDetails.avatar;
          this.name=userDetails.name;
          this.role=userDetails.role
        } else {
          this.$toast.fail("你还未登录");
        }
      })
    },

    pushUserDetails() {
      this.$router.push('/user/details')
    },
    /**
     * 退出登录
     */
    logout() {
      this.$dialog.confirm({
        title: '退出登录',
        message: '退出登录后需重新登录,是否继续?',
      })
          .then(() => {
            localStorage.clear()
            this.$router.replace('/user/login')
          })
          .catch(() => {
            // on cancel
          });
    },
    wait(){
      let active='2'
      localStorage.setItem("active",active);
      this.$router.replace('/home/order-list')
    },
    orderList(){
      let active='0'
      localStorage.setItem("active",active);
      this.$router.replace('/home/order-list')
    },
    feedback(){
      this.$router.push('/user/feedback');
    }
  },
}
</script>

<style scoped>

/* 顶部用户信息部分样式 */
.panel-top {
  padding-top: 20px;
  height: 120px;
  background-image: linear-gradient(
      rgb(125, 204, 236) 0%,
      rgb(20, 159, 219) 100%
  );
  background-image: -webkit-linear-gradient(
      -90deg,
      rgb(125, 204, 236) 0%,
      rgb(20, 159, 219) 100%
  );
}

.panel-top .userinfo {
  display: flex;
  margin: 20px;
}

.panel-top .userinfo .nameinfo {
  margin-top: 8px;
  margin-left: 15px;
}

.panel-top .tabs {
  display: flex;
  margin-top: 10px;
}

.panel-top .tabs .tab {
  width: 25%;
  text-align: center;
}

.panel-top .tabs .tab .value {
  color: rgb(94, 224, 224);
}

/* 面板样式 */
.panel-container {
  padding: 10px 10px 70px 10px;
  background-color: rgb(213, 238, 249);
}

.panel-container .panel {
  border-radius: 10px;
  background: #fff;
  padding: 5px;
  margin-top: 35px;
  text-align: left;
}

.panel-container .panel p {
  font-weight: normal;
  padding-left: 10px;
}

.panel-container .panel .divider {
  border-bottom: 1px solid #ddd;
  margin: 5px 0px;
}

</style>
